 <template>
  <div class="bg_page">
    <header-bar title="Demo" :show-return="false"></header-bar>
    <!-- <header-bar title="Demo" background="white"></header-bar> -->
    <pull-refresh :bottom="panelBottom" ref="pullRefreshPanel" id="DemoScroll" :background-color="'#F3F5F7'" :top="headerHeight" :enableRefresh="true" @refresh="refreshData">
      <div class="inner_panel">
        <!-- <p v-for="(item,index) in list" :key="index">{{item.text + index}}</p>
    
        <div>
           <infinite-load v-if="list.length > 0" :scroll-target="scrollTarget" :is-loading="isLoading" :tipsShow="tipsShow" :is-nomore="isNomre" @load="getNextData"></infinite-load>
        </div> -->
      </div>

    </pull-refresh>
  </div>
</template>

<script>
import HeaderBar from "@/components/header.vue"
import PullRefresh from "@/components/pullRefresh.vue";
import infiniteLoad from '@/components/infiniteLoad.vue';
import {mapState,mapActions} from 'vuex';
export default {
  props: {
   
  },
  components:{
    HeaderBar,
    PullRefresh,
    infiniteLoad
  },
  mounted() {

  },
  data() {
    return {
      panelBottom:0,
      list:[
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'},
        {text:'Hello Demo'}
      ],
      scrollTarget: '#DemoScroll',
      isLoading: false,
      isNomre: false,
      tipsShow: true,
    }
  },
  computed: mapState({
    headerHeight: state => state.headerHeight,
  }),
  created() {
    // this.getData();
   
  },
  filters:{
    amountFormat(value,flag) {
    	if (!value) return;
    	value = value*1;
    	let result;
    	if(flag){
    		value = value.toFixed(0);
    	}else{
    		value = value.toFixed(2);
    	}
      result = value.replace(/\B(?=(\d{3})+\b)/g,',');
      return result
    }
  },
  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    getData(){
      // this.toggleLoading({flag:true});
      // this.$ajax.getData({
      // }).then((res)=>{
      //   if(res.code=='0000'){
      //     this.xxx = res.data;
      //   }else{
      //     this.showMsg({content:res.msg});
      //   }
      //   this.toggleLoading({flag:false});
      // });
    },
    confirmCb(){
      console.log('OK');
    },
    cancelCb(){
      console.log('NO');
    },
    refreshData(done){
      setTimeout(()=>{
        // this.showModal({
        //   content: "刷新完成",
        //   btns: ["确认", "取消"],
        //   callbacks: [this.confirmCb,this.cancelCb]
        // });
        done();
      },1000)
    },
    getNextData(){
      let list = [];
      this.isLoading = true;
      setTimeout(()=>{
        for(let i = 0; i <10 ;i++){
          list.push({text:'Hello Demo'});
        };

        this.list = [...this.list,...list];
        if(this.list.length > 60){
          this.isNomre = true;
        }

        this.isLoading = false;
      },2000);

    }
  }
}
</script>

<style lang="less" scoped>
.bg_page{
  min-height: 100%;
  background-color: #F5F8FC;
}
.inner_panel{
   background-color: #fff;
   padding: 0.2rem;
   p{
     line-height: 1rem;
     text-align: center;
     border-bottom: 0.02rem solid #eee;
   }
}
</style>
